<h3>Classic Tables</h3> <!-- Widget --> <div class="widget widget-inverse"> <!-- Widget heading --> <div class="widget-head"> <h4 class="heading">Minimal Table</h4> </div> <!-- // Widget heading END --> <div class="widget-body"> <!-- Table --> <table class="table table-condensed"> <!-- Table heading --> <thead> <tr> <th class="center">No.</th> <th>Name</th> <th>Location</th> <th>Position</th> <th class="center">Rating</th> <th class="center">Progress</th> <th class="text-right">Action</th> </tr> </thead> <!-- // Table heading END --> <!-- Table body --> <tbody> <!-- Table row --> <tr> <td class="center">1</td> <td> <img src="../assets//images/people/35/8.jpg" width="20" class="img-circle"/> <span >Adrian Demian</span></td> <td>MI, USA </td> <td>Senior UI Designer</td> <td class="center"><div class="rating text-faded"> <span class="star"></span> <span class="star"></span> <span class="star"></span> <span class="star active"></span> <span class="star"></span> </div> </td> <td class="center innerLR"> <div class="progress progress-mini"> <div class="progress-bar progress-bar-primary" style="width: 75%;"></div> </div> </td> <td class="text-right"> <div class="btn-group btn-group-xs "> <a href="" class="btn btn-inverse"><i class="fa fa-pencil"></i></a> <a href="" class="btn btn-danger"><i class="fa fa-times"></i></a> </div> </td> </tr> <!-- // Table row END --> </tbody> <!-- // Table body END --> </table> <!-- // Table END --> </div> </div> <!-- // Widget END --> <!-- Widget --> <div class="widget widget-inverse"> <!-- Widget heading --> <div class="widget-head"> <h4 class="heading">Bordered Table</h4> </div> <!-- // Widget heading END --> <div class="widget-body" > <!-- Table --> <table class="table table-bordered table-white"> <!-- Table heading --> <thead> <tr> <th class="center">No.</th> <th>Name</th> <th>Location</th> <th>Position</th> <th class="center">Rating</th> <th class="center">Progress</th> <th class="text-right">Action</th> </tr> </thead> <!-- // Table heading END --> <!-- Table body --> <tbody> <!-- Table row --> <tr> <td class="center">1</td> <td> <img src="../assets//images/people/35/8.jpg" width="20" class="img-circle"/> <span >Adrian Demian</span></td> <td>MI, USA </td> <td>Senior UI Designer</td> <td class="center"><div class="rating text-faded"> <span class="star"></span> <span class="star"></span> <span class="star"></span> <span class="star active"></span> <span class="star"></span> </div> </td> <td class="center innerLR"> <div class="progress progress-mini"> <div class="progress-bar progress-bar-primary" style="width: 75%;"></div> </div> </td> <td class="text-right"> <div class="btn-group btn-group-xs "> <a href="" class="btn btn-inverse"><i class="fa fa-pencil"></i></a> <a href="" class="btn btn-danger"><i class="fa fa-times"></i></a> </div> </td> </tr> <!-- // Table row END --> </tbody> <!-- // Table body END --> </table> <!-- // Table END --> </div> </div> <!-- // Widget END --> <!-- Widget --> <div class="widget widget-inverse"> <!-- Widget heading --> <div class="widget-head"> <h4 class="heading">Condensed Table</h4> </div> <!-- // Widget heading END --> <div class="widget-body"> <!-- Table --> <table class="table table-bordered table-condensed"> <!-- Table heading --> <thead> <tr> <th class="center">No.</th> <th>Name</th> <th>Location</th> <th>Position</th> <th class="center">Rating</th> <th class="center">Progress</th> <th class="text-right">Action</th> </tr> </thead> <!-- // Table heading END --> <!-- Table body --> <tbody> <!-- Table row --> <tr> <td class="center">1</td> <td> <img src="../assets//images/people/35/8.jpg" width="20" class="img-circle"/> <span >Adrian Demian</span></td> <td>MI, USA </td> <td>Senior UI Designer</td> <td class="center"><div class="rating text-faded"> <span class="star"></span> <span class="star"></span> <span class="star"></span> <span class="star active"></span> <span class="star"></span> </div> </td> <td class="center innerLR"> <div class="progress progress-mini"> <div class="progress-bar progress-bar-primary" style="width: 75%;"></div> </div> </td> <td class="text-right"> <div class="btn-group btn-group-xs "> <a href="" class="btn btn-inverse"><i class="fa fa-pencil"></i></a> <a href="" class="btn btn-danger"><i class="fa fa-times"></i></a> </div> </td> </tr> <!-- // Table row END --> </tbody> <!-- // Table body END --> </table> <!-- // Table END --> </div> </div> <!-- // Widget END --> <!-- Widget --> <div class="widget widget-inverse"> <!-- Widget heading --> <div class="widget-head"> <h4 class="heading">Striped Table</h4> </div> <!-- // Widget heading END --> <div class="widget-body" > <!-- Table --> <table class="table table-bordered table-striped table-white"> <!-- Table heading --> <thead> <tr> <th class="center">No.</th> <th>Name</th> <th>Location</th> <th>Position</th> <th class="center">Rating</th> <th class="center">Progress</th> <th class="text-right">Action</th> </tr> </thead> <!-- // Table heading END --> <!-- Table body --> <tbody> <!-- Table row --> <tr> <td class="center">1</td> <td> <img src="../assets//images/people/35/8.jpg" width="20" class="img-circle"/> <span >Adrian Demian</span></td> <td>MI, USA </td> <td>Senior UI Designer</td> <td class="center"><div class="rating text-faded"> <span class="star"></span> <span class="star"></span> <span class="star"></span> <span class="star active"></span> <span class="star"></span> </div> </td> <td class="center"> <div class="progress progress-mini"> <div class="progress-bar progress-bar-primary" style="width: 75%;"></div> </div> </td> <td class="text-right"> <div class="btn-group btn-group-xs "> <a href="" class="btn btn-inverse"><i class="fa fa-pencil"></i></a> <a href="" class="btn btn-danger"><i class="fa fa-times"></i></a> </div> </td> </tr> <!-- // Table row END --> <!-- Table row --> <tr> <td class="center">1</td> <td> <img src="../assets//images/people/35/8.jpg" width="20" class="img-circle"/> <span >Adrian Demian</span></td> <td>MI, USA </td> <td>Senior UI Designer</td> <td class="center"><div class="rating text-faded"> <span class="star"></span> <span class="star"></span> <span class="star"></span> <span class="star active"></span> <span class="star"></span> </div> </td> <td class="center"> <div class="progress progress-mini"> <div class="progress-bar progress-bar-primary" style="width: 75%;"></div> </div> </td> <td class="text-right"> <div class="btn-group btn-group-xs "> <a href="" class="btn btn-inverse"><i class="fa fa-pencil"></i></a> <a href="" class="btn btn-danger"><i class="fa fa-times"></i></a> </div> </td> </tr> <!-- // Table row END --> </tbody> <!-- // Table body END --> </table> <!-- // Table END --> </div> </div> <!-- // Widget END -->
@import "http://localhost/shared/components/modules/admin/ratings/assets/less/rating.less"; @import "assets/components/core/less/widgets.less"; @import "assets/components/modules/admin/tables/classic/assets/less/tables.less"; @import "http://localhost/shared/components/library/jquery-ui/css/jquery-ui.min.css";
<head>
section of your HTML document, before any JavaScript files: <link type="stylesheet/less" href="styles.less" />
NOTE All the styles from the CORE package also need to be imported in this file, before the component imports.
HEAD You should include the following scripts in the head section of the document, right before the closing </head>
tag, after styles.
<script src="assets/components/library/jquery-ui/js/jquery-ui.min.js?v=v1.2.3"></script> <script src="assets/components/plugins/jquery-ui-touch-punch/jquery.ui.touch-punch.min.js?v=v1.2.3"></script>
BODY You should include the following scripts at the end of the HTML document, right before the closing </body>
tag.
<script src="assets/components/modules/admin/tables/classic/assets/js/tables-classic.init.js?v=v1.2.3"></script>